<template>
	<view class="container">
		<view class="top" v-if="carts.length > 0">
			<scroll-view 
			class="scroll-view_H" 
			scroll-x="true" 
			v-for="(item,index) of carts"
			:key="item.id"
			>
				<view class="cartInfo">
					<view class="cartInfochild">
						<!-- 选择框 -->
						<view class="cartInfo_switch common">
							<!-- 点击当前商品 -->
							 <switch  
							 type="checkbox" 
							 :checked="item.checked" 
							 @change="_setChecked(index)"
							 />
						</view>
						<!-- 图片 -->
						<view class="cartInfo_image common">
							<image :src="item.img" mode=""></image>
						</view>
						
						<!-- 信息 -->
						<view class="cartInfo_info">
							<label for="" style="font-size: 26rpx;">{{item.goodsname}}</label>
							<label for="" style="font-size: 24rpx; color: #ccc;">规格：白色</label>
							<label for="" style="color: red;">￥{{item.price}}</label>
						</view>
						<!-- 加减数量 -->
						<view class="cartInfo_num">
							<view class="cartInfo_num_child">
								<label for="" @click="_minus(index)">-</label>
								<label for="">{{item.num}}</label>
								<label for="" @click="_add(index)">+</label>
							</view>						
						</view>
					</view>
					
				</view>
				<view class="cartDel" @click="_deleteCart(index)">
					<label for="">删除</label>
				</view>			
			</scroll-view>
		</view>
		<block v-else>
			<view class="">
				空空如也~
			</view>
		</block>
		
		<!-- 底部 -->
		<view class="foot">
			<view class="footd1">
				<switch  
				type="checkbox" 
				:checked="_allChecked"
				@change="_allCheckedHandle($event)"
				 />
				<label>全选</label>
			</view>
			<view class="footd2">
				<view class="footd2sp1">总计：<label style="color: red;">{{_totalPrice}}</label></view>
				<label class="footd2sp2">不含运费，已优惠￥0.00</label>
			</view>
			<!-- 跳到提交订单，结算页面 -->
			<view class="footd3">
				<!-- 被选中的商品的个数 -->
				<label @click="_goToConfirm">去结算({{_totalNum}}件)</label>
			</view>
		</view>
		
	</view>
</template>

<script>

import Http from '@/utils/http.js'	
import { apiurl } from '@/utils/config.js'
let appObj = getApp()
	
	export default {
		data(){
			return {
				carts:[],//购物车列表
			}
		},
		onShow(){
			this._getCarts()
		},
		computed:{
			//是否全选
			_allChecked(){
				let checked = false
				if(this.carts.length > 0){
					 checked = this.carts.every(item=>{
						return item.checked
					})
				}
				
				
				return checked
				//console.log( checked )
			},
			//总数量
			_totalNum(){
				let total = 0
				this.carts.forEach(item=>{
					
					// if( item.checked ){
					// 	total += item.num
					// }
					item.checked? total += item.num :''
				})
				return total
			},
			//总价格
			_totalPrice(){
				
				let totalPrice = 0
				this.carts.forEach(item=>{
					
					// if( item.checked ){
					// 	total += item.num
					// }
					item.checked? totalPrice += item.num * item.price :''
				})
				return totalPrice
			},
			
		},
		methods:{
			
			//跳转到订单确认页面
			//订单确认页面要拿到选中商品的数据，过滤【选中状态进行过滤】操作。
			//实际开发过程中 购物车的数据会很多的，所以不用url地址传递
			//我们使用缓存去传
			_goToConfirm(){
				//console.log( this.carts )
				let carts = this.carts.filter(item=>{
					return item.checked
				})
				if( carts.length == 0 ){
					uni.showToast({
						title:'请选个商品吧~'
					})
					return
				}
				//console.log( carts )
				uni.setStorageSync('carts',carts)
				uni.navigateTo({
					url:'../confirm/confirm'
				})
			},
			
			//修改购物车中商品的状态
			/*
				id
				num
				checked
				header:authorization
				
				/api/cartedit
			*/
			async _editCart(index){
				//console.log('修改购物车中的商品状态')
				//console.log(this.carts[index])
				let { id,num,checked } = this.carts[index]
				checked = checked  ? 1 : 0
				let result = await Http({
					url:'/api/cartedit',
					data:{
						id,num,checked
					},
					header:{
						authorization:appObj.userInfo.token
					}
				})
				//console.log( result,'购物车状态修改结果' )
			},
			
			//删除购物车
			async _deleteCart(index){
				
				let { id } = this.carts[index]
				let result = await Http({
					url:'/api/cartdelete',
					data:{
						id
					},
					header:{
						authorization:appObj.userInfo.token
					}
				})
				//console.log( result )
				this.carts.splice(index,1)
				
			},
			//根据全选按钮的状态设置每一个商品数据的选中状态。
			_allCheckedHandle(e){
				// console.log(e,'全选按钮')
				let checked = e.detail.value 
				this.carts.forEach((item,index)=>{
					item.checked = checked
					this._editCart(index)
				})
			},
			//单个商品的状态设置
			_setChecked(index){
				//console.log( this.carts[index] )
				this.carts[index].checked = !this.carts[index].checked 
				this._editCart(index)
			},
			//数量加1
			_add(index){
				//console.log(index,'+1')
				this.carts[index].num++
				this._editCart(index)
			},
			//数量减1
			_minus(index){
				//console.log(index,'-1')
				//console.log( this.carts[index] )
				this.carts[index].num--
				if( this.carts[index].num==0 ){
					this.carts[index].num = 1
				}
				this._editCart(index)
			},
			
			//获取购物车列表
			async _getCarts(){
				let result = await Http({
					url:'/api/cartlist',
					data:{
						uid:appObj.userInfo.uid,
					},
					header:{
						authorization:appObj.userInfo.token
					}
				})
				//console.log( result,'购物车列表' )
				result.data.list = result.data.list ? result.data.list : []
				result.data.list.forEach(item=>{
					item.img = apiurl + item.img
					item.checked = item.checked == 1? true : false
				})
				this.carts = result.data.list
				//console.log( this.carts )
			}
		},
	}
</script>

<style>
	@import url("../../common/css/cart.css");

	.cartInfo_image_img{
		width: 120rpx;
		height: 120rpx;
	}
	.foot{
		bottom: var(--window-bottom)
	}
</style>